import React, { Component } from 'react'
import { TabBar } from 'antd-mobile'
import './assets/scss/App.scss'
// 引入字体图标的css  .css后缀不能省略
import './assets/fonts/iconfont.css'
import { withRouter } from 'react-router-dom'
// 导入路由配置
import Routes from './router/index'
class App extends Component {
  state = {
    // defaultActiveKey tabbar默认选中的key 对应tabs数据中key选项
    // 结合路由路径pathname 进行获取并匹配
    // 最后将defaultActiveKey进行动态修改
    defaultActiveKey:
      this.props.location.pathname === '/'
        ? this.props.location.pathname
        : this.props.location.pathname.replace('/', '')
  }
  render() {
    console.log(this.props)
    const { push } = this.props.history
    const tabs = [
      {
        key: '/',
        title: '主页',
        icon: <span className="iconfont icon-shouye"></span>
      },
      // {
      //   key: 'shop',
      //   title: '门店',
      //   icon: (active) =>
      //     active ? (
      //       <img
      //         src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/icons/icon-stores-active.svg"
      //         alt=""
      //       />
      //     ) : (
      //       <img
      //         src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/icons/icon-stores.svg"
      //         alt=""
      //       />
      //     )
      // },
      {
        key: 'shop',
        title: '门店',
        icon: <span className="iconfont icon-mendianfenxi"></span>
      },
      {
        key: 'account',
        title: '我的账户',
        icon: <span className="iconfont icon-zhanghu"></span>
      },
      {
        key: 'menu',
        title: '菜单',
        icon: <span className="iconfont icon-kafei"></span>
      },
      {
        key: 'more',
        title: '更多',
        icon: <span className="iconfont icon-gengduo"></span>
      }
    ]
    return (
      <div>
        <Routes></Routes>
        <div className="tabbar">
          <TabBar
            defaultActiveKey={this.state.defaultActiveKey}
            safeArea
            onChange={(value) => push(value)}
          >
            {tabs.map((item) => (
              <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
            ))}
          </TabBar>
        </div>
      </div>
    )
  }
}
export default withRouter(App)
